<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello, this is browser ui.</title>
</head>
<body>
<h2>UI - Cross Domain - Cookie</h2>

<table border="1px solid">
    <tbody>
    <tr>
        <td>演示步骤</td>
        <td>说明</td>
    </tr>
    <tr>
        <td>步骤1</td>
        <td>点击用户登录按钮，跳转到运行在9001端口的用户服务，输入用户名和密码，进行登录</td>
    </tr>
    <tr>
        <td>步骤2</td>
        <td>登录成功将自动跳回当前页面，点击方法1和方法2的读取登录用户信息按钮，注意当前页面运行在9002端口，其cookie和9001端口的应用实现了共享。</td>
    </tr>
    <tr>
        <td>步骤3</td>
        <td>注销用户登录</td>
    </tr>
    <tr>
        <td>步骤4</td>
        <td>回退当前页面，重新读取登录用户信息按钮，提示用户未登录</td>
    </tr>
    </tbody>
</table>

<br/>

<div>
    <div>点击下面的按钮，跳转到9001端口的用户登录服务，先进行登录</div>
    <div>
        <button>
            <a href="http://localhost:9001/login.html?callback=http%3a%2f%2flocalhost%3a9002%2fcookie-by-same-domain.html">
                用户登录
            </a>
        </button>
    </div>
</div>

<div>
    <div>方法1 - 读取用户登录信息 </div>
    <div>
        <button id="btn_read_user_info">通过JS直接从cookie中读取用户信息</button>
    </div>
</div>

<div>
    <div>方法1 - 读取用户登录信息 </div>
    <div>
        <button id="btn_read_user_info_api">发送请求到后端，后端从cookie中读取用户信息</button>
    </div>
</div>

<div>
    <div>点击下面的按钮，跳转到9001端口的用户注销服务，进行注销登录操作</div>
    <div>
        <button><a href="http://localhost:9001/logout.html">用户注销登录</a></button>
    </div>
</div>

<ol>
    <li><a href="http://localhost:9001/index.html">用户服务-首页</a></li>
    <li><a href="/">Go UI Home</a></li>
</ol>

</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery.cookie/1.4.1/jquery.cookie.js"></script>
<script type="text/javascript">

    $("#btn_read_user_info").click(function () {

        let userName = $.cookie('user_name');
        let userRole = $.cookie('user_role');

        if (userName == null || userName == "" || userRole == null || userRole == "") {
            alert("用户未登录，请点击登录按钮进行登录。");
        } else {
            alert("用户已登录，用户名为：" + userName + "用户角色为：" + userRole);
        }

    });

    $("#btn_read_user_info_api").click(function () {

        $.ajax({
            url: "/api/user",
            type: "GET",
            contentType: "application/json;charset=utf-8",
            success: function (data, status, ajax) {
                console.log("success to read user info.");
                if (data == null || data.userName == null || data.userName == "" || data.userRole == null || data.userRole == "") {
                    alert("用户未登录，请点击登录按钮进行登录。");
                } else {
                    alert("用户已登录，用户名为：" + data.userName + "用户角色为：" + data.userRole);
                }
            },
            error: function () {
                console.log("fail to read user info.");
                alert("获取用户信息失败");
            }
        });

    });


</script>
</html>